<template>
<swiper :options="swiperOption" ref="mySwiper">
 <!-- slides -->
 <swiper-slide v-for="item in datas"><img :src='item.cover'/> </swiper-slide>
 <!-- Optional controls -->
 <div class="swiper-pagination"  slot="pagination">1</div>
</swiper>
</template>
<script>
import axios from 'axios'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'carrousel',
 data() {
   return {
     datas:'',
     swiperOption: {
       notNextTick: true,
       // swiper configs 所有的配置同swiper官方api配置
       autoplay: 3000,
       autoplayDisableOnInteraction:false,
      //  loop:true,
       // direction : 'vertical',
       effect:"coverflow",
       grabCursor : true,
       setWrapperSize :true,
       pagination : '.swiper-pagination',
       paginationClickable :true,
       prevButton:'.swiper-button-prev',
       nextButton:'.swiper-button-next',
       // scrollbar:'.swiper-scrollbar',
       mousewheelControl : true,
       observeParents:true,
     }
   }
 },components: {
 swiper,
 swiperSlide
},
 computed: {
   swiper() {
     return this.$refs.mySwiper.swiper
   }
 },
 mounted() {

 },
 created(){
   axios.get('../../static/lunbo.json').then((response)=>{
           this.datas = response.data.data;
          //  console.log(this.datas);
   })
 }
}
</script>
<style scoped lang="css">
   .swiper-slide{
     float: left;
     width: 100%;
     height: 100%;
      margin-top: 4rem;
   }
   .swiper-slide>img{
     width: 100%;
     height: 100%;
   }
   .swiper-wrapper{
     width: 100%;
     height: 19rem;
     overflow: hidden;
     border-bottom: 0.8rem solid #f1f1f1;

   }
   .swiper-pagination-bullet{
     /*background-color: black;*/
     display: inline-block;
     width: 0.5rem;
     height: 0.5rem;
     border:1px solid #fff;
     border-radius: 40%;
     margin-right: 0.7rem;
   }
   .swiper-pagination{
     width: 100%;
     height: 2rem;
     position: absolute;
     top: 4rem;
     right: 0;
     text-align: right;
   }
   .swiper-pagination-bullet-active{
      background-color: #fff;
   }
</style>
